<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
import { uploadImageApi } from '@/apis/consult';
import { useConsultStore } from '@/stores/consult';
import type { Picture } from '@/types/consult';
import { onShow } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';

const store = useConsultStore()

const props = defineProps<{
  type:string
  illnessType:string
  depId:string
}>()



// 病情描述数据
const illnessInfo = ref({
  illnessDesc: '',
  illnessTime: 1,
  consultFlag: 0,
  // 接收上传到云空间的图片
  pictures:[] as Picture[]
})

// 患病时长
const illnessTimes = [
  { value: 1, text: '一周内' },
  { value: 2, text: '一月内' },
  { value: 3, text: '半年内' },
  { value: 4, text: '半年以上' },
]

const consultFlags = [ 
  { value: 1, text: '就诊过' },
  { value: 0, text: '没有就诊过' },
]

onShow(()=>{
  if(store.illnessInfo.illnessDesc!==""){
    uni.showModal({
      title: '温馨提示',
      content: '是否恢复之前填写的病情信息？',
      confirmText: '确认',
      confirmColor: '#16C2A3',
      cancelColor: '#848484',
      success({ confirm }) {
        if (confirm) illnessInfo.value = store.illnessInfo
      },
    })
  }
})

const onTimeTagClick = (value: number) => {
  // 记录用户选择的数据
  illnessInfo.value.illnessTime = value
}
const onFlagTagClick = (value: number) => {
  // 记录用户选择的数据
  illnessInfo.value.consultFlag = value
}
// 上传
const onSelect = async (e: any) => {
 try{
  const res = await uploadImageApi(e.tempFiles[0])
  illnessInfo.value.pictures.push(res)
 }catch(e){
  console.log(e);
  
 }
  
}
// 删除图片
const onDeleteImg = (e:any) => {
  illnessInfo.value.pictures.splice(e.index,1)
}

// 下一步
// 数据校验
const nextStepEnable = computed(()=> illnessInfo.value.illnessDesc !== '')

const onNextStep = () => {
  // 6.2 数据缓存
  store.type = props.type
  store.illnessType = props.illnessType
  store.depId = props.depId
  store.illnessInfo = illnessInfo.value

  // 6.3 跳转到下一页
  uni.navigateTo({ url: '/subpkg_archive/list/index?type=consult' })
}
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput v-model="illnessInfo.illnessDesc" type="textarea" :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797" placeholder="请详细描述您的病情,病情描述不能为空" />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text class="tag" v-for="illnessTime in illnessTimes" :key="illnessTime.value"
            @click="onTimeTagClick(illnessTime.value)"
            :class="{ active: illnessTime.value === illnessInfo.illnessTime }">一周内</text>
          <!-- <text class="tag">一个月内</text>
          <text class="tag">半年内</text>
          <text class="tag">大于半年</text> -->
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text v-for="consultFlag in consultFlags" :key="consultFlag.value" @click="onFlagTagClick(consultFlag.value)"
            :class="{ active: consultFlag.value === illnessInfo.consultFlag }" @delete="onDeleteImg"  class="tag">
            {{ consultFlag.text }}
          </text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker v-model="illnessInfo.pictures" @delete="onDeleteImg" @select="onSelect" :auto-upload="false" title="上传病情相关图片 (仅医生可见)" limit="8" :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp" />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" :disabled="!nextStepEnable" @click="onNextStep">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>